<template>
	<view class="repairs">
		<uni-nav-bar left-icon="left" @clickLeft="back" leftText='返回' height='127rpx' title="报修" />
		<view class="header">
			<view class="header-top">
				<view class="uni-title uni-common-pl" style="padding-left: 30rpx;">类型</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode=selector :range-key="'name'" @change="bindTypeChange" :range="typeList">
								<view class="uni-input">{{selectType.name}}</view>
							</picker>
						</view>
						<uni-icons type="right" size="18" color="#afafaf"></uni-icons>
					</view>
				</view>
			</view>
			<view class="header-center">
				<view class="uni-title uni-common-pl" style="padding-left: 30rpx; width: 135rpx;">报修地址</view>
				<view class="uni-list">
					<input class="uni-input" name="input" placeholder="请输入报修地址" v-model="params.address"
						style="color:#afafaf; padding-left: 350rpx; font-size: 26rpx;" />
					<uni-icons type="right" size="18" color="#afafaf"></uni-icons>
				</view>
			</view>
			<view class="header-center">
				<view class="uni-title uni-common-pl" style="padding-left: 30rpx; width: 135rpx;">联系电话</view>
				<view class="uni-list">
					<input class="uni-input" name="input" placeholder="请输入联系电话" v-model="params.tel"
						style="color:#afafaf; padding-left: 350rpx; font-size: 26rpx;" />
					<uni-icons type="right" size="18" color="#afafaf"></uni-icons>
				</view>
			</view>
		</view>
		<view class="center">
			<uni-easyinput type="textarea" v-model="params.content" placeholder="请输入报修问题,以便维修人员尽快为您解决"></uni-easyinput>
		</view>
		<view class="bottom">
			<view @click="uploadImg" class="bottom-left">
				<view class="img"></view>
				<uni-icons type="camera" size="36"></uni-icons>
			</view>
			<view class="bottom-right" v-for="(item,index) in params.images">
				<image class="img" :src="IMGBASEURL+item.url" mode=""></image>
				<view class="delete" @click="deleteImg(index)">×</view>
			</view>
		</view>
		<view class="btn" @click="repairsAdd()">
			<text>提交</text>
		</view>
	</view>
</template>

<script>
	import {
		repairsAdd,
		repairsType
	} from '../../api/repairs.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		buildingList
	} from '../../api/building.js'
	import {
		IMGBASEURL,
		IMGBASEURLS,
	} from '../../utils/config.js'
	import {
		upload,
		chooseImage
	} from '../../utils/upload.js'
	export default {
		data() {
			return {
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						color: "#c9c9c9",
						width: 1,
						style: 'solid',
						radius: '10px'
					}
				},
				typeList: [],
				selectType: {
					name: "请选择类型",
					id: 0
				},
				params: {
					id: 0,
					address: "",
					content: "",
					tel: "",
					type: 0,
					state: 1,
					images: []
				},
				imgCounts: 4,
				IMGBASEURL: IMGBASEURLS
			}
		},
		watch: {

		},
		computed: {

		},

		onLoad() {
			this.repairsType()

		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			// 删除图片
			deleteImg(index) {
				this.params.images.splice(index, 1)
			},
			// 图片上传
			async uploadImg() {
				console.log('1111')
				let that = this;
				let data = await chooseImage(this.imgCounts)
				data.forEach(item => {
					upload(item).then(response => {
						if (response.errCode == 10000) {
							that.params.images.push({
								url: response.data
							})
						}
					})
				})
			},
			//添加
			async repairsAdd() {
				let isTel = /^1[3-9]\d{9}$/
				if (this.params.tel == '') {
					uni.showToast({
						title: '联系电话不可为空',
						icon: 'error'
					})
				} else if (!isTel.test(this.params.tel)) {
					uni.showToast({
						title: '联系电话格式不正确',
						icon: 'error'
					})
				} else if (this.params.address == '') {
					uni.showToast({
						title: '报修地址不可为空',
						icon: 'error'
					})
				} else if (this.params.content == '') {
					uni.showToast({
						title: '报修问题不可为空',
						icon: 'error'
					})
				} else {
					let data = await repairsAdd(this.params)
					if (data.errCode == 10000) {
						uni.showToast({
							title: '提交成功',
							icon: "success"
						})
						uni.navigateTo({
							url: './record'
						})
					}
				}

			},
			//类型
			async repairsType() {
				let data = await repairsType()
				if (data.errCode == 10000) {
					this.typeList = data.data.list.map(item => ({
						id: item.id,
						name: item.name
					}));
				}
			},
			//类型接口
			bindTypeChange: function(e) {
				this.selectType = this.typeList[e.target.value];
				console.log(this.selectBuild)
			},

		}
	}
</script>

<style lang="less">
	@import '../../static/style/repairsIndex.less';
</style>
